{% extends "trees/base.html" %}
{% block title %}How will you use JM3?{% endblock %}
{% block content %}
<div class="col-12 col-md-6 mx-auto" style="margin-top:6vh;">
  <div class="progress mb-4" style="height:6px;"><div class="progress-bar bg-jm3" style="width:33%"></div></div>
  <h3 class="mb-1">How will you use JM3?</h3>
  <p class="text-muted">Pick what fits — you can change this later.</p>
  <form method="post">
    {% csrf_token %}
    <div class="row g-3">
      {% for value, icon, label in options %}
      <div class="col-6">
        <button type="submit" name="usage" value="{{ value }}" class="action-btn w-100">
          <span class="ico">{{ icon }}</span>{{ label }}
        </button>
      </div>
      {% endfor %}
    </div>
    <p class="mt-3"><a href="{% url 'ob_manage' %}" class="text-muted">&larr; Back</a></p>
  </form>
</div>
{% endblock %}
{% block extra_js %}{% endblock %}